<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/1px.css" />
    <link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      #app {
        font-size: 14px;
        box-sizing: border-box;
        padding-bottom: 50px;
        -webkit-overflow-scrolling: touch;
      }
      
      .order {
        padding: 10px;
      }
      
      .goods-item div {
        align-items: center;
      }
      
      .goods-item__top {
        padding-top: 10px;
      }
      
      .img-wrapper {
        flex: 0 1 90px;
        text-align: center;
        position: relative;
      }
      .img-wrapper .id{
      	position: absolute;
      	bottom: 6px;
      	width: 100%;
      	text-align: center;
      	font-size: 13px;
      }
       .img-wrapper .id span{
       	background-color: rgba(52, 52, 52, .5);
      	color: #FFFFFF;
      	display: inline-block;
      	width: 70px;
       }
      .goods-info {
        overflow: hidden;
      }
      
      .goods-info div {
        margin: 3px 0;
      }
      
      .goods-info-right {
        flex: 0 1 120px;
        text-align: center;
        overflow: hidden;
      }
      
      .goods-info-right div {
        margin: 3px 0;
      }
      
      .goods-item__bottom {
        padding-bottom: 5px;
      }
      
      .goods-item_total {
        padding-left: 10px;
      }
      
      .goods-item_op {
        flex: 0 1 120px;
        text-align: center;
      }
      
      .goods-item_op button {
        width: 50%;
      }
      .goods-item_op .receive-btn{
      		background-color: #FF9800;
      		border-color: #FF9800;
      		color: #fff;
      }
      .fix-bar {
        position: fixed;
        height: 38px;
        line-height: 38px;
        width: 100%;
        text-align: center;
        bottom: 0px;
        z-index: 10;
        background-color: #fff;
      }
       .bgGray{
      	background-color: #F8F8F8;
      }
      .back-btn {
				background-color: #E6E6E6;
				color: #000;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
			
			.next-btn {
				background-color: #ff6800;
				color: #fff;
				width: 90%;
				margin: auto auto;
				vertical-align: middle;
			}
      
      .mui-scroll-wrapper {
        padding-bottom: 40px;
      }
      
      .mask {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        font-size: 18px;
        color: #999;
        text-align: center;
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
      mui.init({
        beforeback: function() {
          var main = plus.webview.getWebviewById('main');
          mui.fire(main, 'refresh');
          return true;
        }
      });
    </script>

    <div class="list" id="app">
      <div class="mask" v-show="isInit">加载中...</div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll goods-list">
          <div class="vux-1px-b order">转场单号: <span v-text="conversion.conversionId"></span></div>

          <div class="goods-item" v-for="(item, index) in goodsList" :key="index" :class="{'bgGray':index%2!==0}">
            <div class="weui-flex">
              <div class="weui-flex__item weui-flex" class="goods-item__top" style="padding-top: 10px;">
                <div class="weui-flex__item img-wrapper">
                   <a href="#middlePopover" class="img-info" :index="index"><img :src="item.cutImg | fixUrl" style="width: 70px; height:70px;" alt="" /></a>
                	 <div class="id"><span v-text="item.goodsId"></span></div>
                </div>
                <div class="weui-flex__item goods-info">
                  <div>名称:<span v-text="item.goodsName"></span></div>
                 
                  <div>门店库存:<span v-text="item.shopGoodsAmount"></span></div>
                </div>
              </div>
              <div class="weui-flex__item goods-info-right">
                <div style="color:red;" v-show="item.conversionAmount !== item.receivingAmount">误差:<span>{{item.recivedAmount-item.conversionAmount}}</span></div>
                <div>配送数:<span v-text="item.conversionAmount"></span></div>
                <div>已入库:<span v-text="item.recivedAmount"></span></div>
              </div>
            </div>
            <div class="weui-flex goods-item__bottom">
              <div class="weui-flex__item goods-item_total">
                <!--申请进货数量:<span v-text="item.amount"></span>-->
              </div>
              <div class="weui-flex__item goods-item_op">
                <div type="button" class="receive-btn mui-btn" style="width:80px;" @click="toStorage(item)">收货</div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="fix-bar weui-flex vux-1px-t">
        <div class="weui-flex__item">
        	<div class="mui-btn back-btn" @click="back">
        		保存
        	</div>
        </div>
        <div class="weui-flex__item" >
        	<div class="mui-btn next-btn" @click="finish">
        		完结
        	</div>
        </div>
      </div>
        <!--显示附加信息-->
    <div id="middlePopover" class="mui-popover">
      <div class="mui-popover-arrow"></div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <p class="fullName">规格：<span></span></p>
          <p class="tags">用途：<span></span></p>
          <p class="score">积分：<span></span></p>
        </div>
      </div>
    </div>
    <!---->
    </div>

    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../config.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.plusReady(function() {
        plus.webview.currentWebview().setStyle({
          scrollIndicator: 'none'
        });
        var vm = new Vue({
          el: '#app',
          data: {
            currentShopObj: {},
            conversionId: '',
            conversion: {},
            goodsList: [],
            shopObjs: [],
            isInit: true
          },
          created: function() {
            this.receiveParmas();
            this.checkApply();
          },
          mounted: function() {
            this.fixScroll();
              //显示用途
               var sf = this
		        mui('.goods-list').on('tap', '.img-info', function(e) {
		          var ind = this.getAttribute('index')
		          var typeFullName = sf.goodsList[ind].goodsType
		          var tags = ''
		          sf.goodsList[ind].tags.forEach(function(item) {
		            tags += item.tagDescribe + ' '
		          })
		          document.querySelector(".fullName span").innerText = typeFullName
		          document.querySelector(".tags span").innerText = tags
		          document.querySelector(".score span").innerText = sf.goodsList[ind].score
		        })
          },
          methods: {
            receiveParmas: function() {
              var self = plus.webview.currentWebview();
              this.conversionId = self.conversionId;
              this.currentShopObj = self.currentShopObj;
              this.shopObjs = self.shopObjs;
            },
            fixScroll: function() {
              mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005,
                brounce: true,
                scrollY: true
              });
            },
            checkApply: function() {
              config.ajax({
                url: config.basePath + '/conversion/checkconversiongoods.do',
                headers: {
                  'Content-Type': 'application/json'
                },
                data: {
                  conversionId: this.conversionId
                },
                crossDomain: true,
                dataType: 'json',
                type: 'POST',
                success: function(res) {
                  if(res.result === 1) {
                    vm.conversion = res.conversion;
                    vm.goodsList = res.goodsList;
                  }
                  setTimeout(function() {
                    vm.isInit = false
                  }, 400);
                }
              })
            },
            toStorage: function(item) {
              var btnArray = ['取消', '确定'];
              mui.prompt('请输入入库数量：', '', item.goodsName + '入库', btnArray, function(e) {
                if(e.index == 1) {
                  var params = {
                    conversion: {
                      conversionId: vm.conversionId
                    },
                    goodsList: [{
                      conversionGoodsId: item.conversionGoodsId,
                      recivedAmount: e.value * 1
                    }]
                  };
                  config.ajax({
                    url: config.basePath + '/conversion/receviedGoodsManyTimes.do',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    data: params,
                    crossDomain: true,
                    dataType: 'json',
                    type: 'POST',
                    success: function(res) {
                      if(res.result === 1) {
                        plus.nativeUI.toast('入库成功');
                        vm.checkApply();
                      } else {
                        plus.nativeUI.toast(res.errormsg);
                      }
                    }
                  });
                }
              }, 'div');
              document.querySelector('.mui-popup-input input').type = 'number'
            },
            finish: function() {
              var params = {
                conversion: {
                  conversionId: vm.conversion.conversionId
                },
                goodsList: []
              }
              var errorGoods = 0,
                ifError = false
              for(var i = 0; i < vm.goodsList.length; i++) {
                params.goodsList.push({
                  conversionGoodsId: vm.goodsList[i].conversionGoodsId,
                  recivedAmount: 0
                });
                if(vm.goodsList[i].conversionAmount - vm.goodsList[i].recivedAmount !== 0) {
                  errorGoods++
                  ifError = true
                }
              }
              var btnArray = ['再次检查', '完结此单'];
              if(ifError) {
              	mui.confirm('有' + errorGoods + '个误差货品，确认完结此订单吗？', '订单完结入库', btnArray, function(e) {
                if(e.index === 1) {
                  config.ajax({
                    url: config.basePath + '/conversion/confirmRecevied.do',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    data: params,
                    crossDomain: true,
                    dataType: 'json',
                    type: 'POST',
                    success: function(res) {
                      if(res.result === 1) {
                        plus.nativeUI.toast('操作成功');
                        mui.back();
                      } else {
                        plus.nativeUI.toast(res.errormsg);
                      }
                    }
                  });
                }
              })
              } else {
              	config.ajax({
                    url: config.basePath + '/conversion/confirmRecevied.do',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    data: params,
                    crossDomain: true,
                    dataType: 'json',
                    type: 'POST',
                    success: function(res) {
                      if(res.result === 1) {
                        plus.nativeUI.toast('操作成功');
                        mui.back();
                      } else {
                        plus.nativeUI.toast(res.errormsg);
                      }
                    }
                  });
              }
            },
            back: function() {
              mui.back();
            }
          },
          filters: {
            fixUrl: function(val) {
              if(val && val.indexOf('http://') === -1) {
                return config.imgPath + val
              }
              return val
            }
          }
        })
      });
    </script>
  </body>

</html>